<template>
	<view class="top-bar">
		<!-- 左侧的汉堡包按钮 -->
		<uni-icons type="bars" size="30" color="#fff" @click="showMenu" />
		<!-- 隐藏在屏幕外边的抽屉组件 -->
		<view class="top">
		<uni-drawer ref="menu" maskClick><image src="../../static/sort/img/top.jpg" mode="widthFix"></image>
			<uni-list >
				<!-- link显示右侧箭头，增加点击反馈动画，指定跳转路径 -->
				<uni-list-item title="我的" link="switchTab" to="/pages/my/my" @click="hideMenu"></uni-list-item>
				<uni-list-item title="商品列表" link to="/pages/productList/productList?fid=1" @click="hideMenu"></uni-list-item>
				<uni-list-item title="商品分类" link="switchTab" to="/pages/sort/sort" @click="hideMenu"></uni-list-item>
				<uni-list-item title="登录" link to="/pages/RegisterLogin/RegisterLogin" @click="hideMenu"></uni-list-item>
				<uni-list-item title="注册" link to="/pages/RegisterLogin/RegisterLogin" @click="hideMenu"></uni-list-item>
			</uni-list>
<!-- 			<button type="default" size="mini" style="margin-top: 200rpx;width: 80%;" @click="hideMenu">退出</button> -->
		</uni-drawer>	</view>
		<!-- 中央的输入区域 -->
		<view class="search-bar">
			<uni-search-bar class="uni-mt-10" radius="15" placeholder="请输入要搜索的内容" clearButton="auto" cancelButton="none"
				@confirm="search"  v-model="res"/>
			<image src="/static/sort/首页轮播图/logo-s.png" mode="widthFix" class="search-img"></image>
		</view>
		<!-- 右侧的登陆链接 -->
		<text class="text" @click="goLogin">登录</text>
	</view>
</template>

<script>
	export default {
		name: "xzTopBar",
		data() {
			return {
            res:''
			};
		},
		methods: {
			 search() {
					let dd=this.res				
					uni.navigateTo({
						url:'/pages/SearchList/SearchList?dd='+dd
					})
					//输入框的值为0
					 this.res=''
						},
			goLogin(){
				uni.navigateTo({
					url:"/pages/RegisterLogin/RegisterLogin"
				})
			},
			goToSearch() {
				//跳转到商品搜索页-保留跳转
				uni.navigateTo({
					url: "/pages/productSearch/productSearch"
				})
			},
			showMenu() {
				//打开抽屉
				this.$refs.menu.open();
			},
			hideMenu() {
				//关闭抽屉
				this.$refs.menu.close()
			}

		}
	}
</script>


<style lang="scss">
	// scss中可以进行数学运算,但是不可以进行不同单位的运算
	//原生css中也可以进行算术运算，但是必须要有空格

	.top-bar {
		display: flex;
		padding: 10px;
		align-items: center;
.top{
	image{
		width: 100%;
		// position: relative;
		// top: 10rpx;
		
	};
}
		.text {
			color: #fff;
		}

		.search-bar {
			flex: 1;
			margin: 0 5px;
			position: relative;

			.search-img {
				width: 43rpx;
				position: absolute;
				top: calc(50% - 40rpx / 2);
				left: 40rpx;
			}
		}
	}
</style>
